<template>
  <div class="widget-graph" :style="styleColor">
    <svg>
      <polygon :points="points" :width="transStyle.width" :height="transStyle.height" :fill="transStyle.fillColor" :stroke="transStyle.strokeColor"
        :stroke-width="transStyle.strokeWidth" pointer-events="all"></polygon>
    </svg>
  </div>
</template>

<script>
  export default {
    name: "WidgetGraphTriangle",
    components: {},
    props: {
      value: Object,
      ispreview: Boolean,
    },
    data() {
      return {
        options: {}
      };
    },
    computed: {
      transStyle() {
        return this.objToOne(this.options);
      },
      styleColor() {
        return {
          position: this.ispreview ? "absolute" : "static",
          width: this.transStyle.width + this.transStyle.strokeWidth + "px",
          height: this.transStyle.height + this.transStyle.strokeWidth + "px",
          left: this.transStyle.left + "px",
          top: this.transStyle.top + "px",
        };
      },
      points() {
        // 我自定义的svg最小为2×1 所以按下面比例放大
        let x = this.transStyle.width / 2 || 1
        let y = this.transStyle.height / 1 || 1
        return `${0*x} ${1*y},${1*x} ${0*y},${2*x} ${1*y}`
      }
    },
    watch: {
      value: {
        handler(val) {
          this.options = val;
        },
        deep: true,
      },
    },
    mounted() {
      this.options = this.value;
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
  .widget-graph {
    width: 100%;
    height: 100%;
  }

  svg {
    width: 100%;
    height: 100%;
  }
</style>
